<template>
  <div class="hs-ee">
    <div class="hs-ee-wrap" id="extinct-root"></div>
  </div>
</template>

<script>
//入驻企业类型
import * as echarts from "echarts";

const option = {
  title: {
    text: "-  入驻企业类型  -",
    subtext: "",
    left: "center",
    top: 4,
    textStyle: {
      color: "#CFEEF8",
      fontSize: 14,
    },
  },
  color: [
    "#107EF4",
    "#6469E0",
    "#55B3F0",
    "#00BFBF",
    "#EA7CCC",
    "#40B17E",
    "#48E3EB",
    "#9ACC67",
    "#5470C6",
    "#EC808D",
  ],
  center: ["50%", "52%"],
  series: [
    {
      type: "treemap",
      roam: "zoom",
      nodeClick: false,
      breadcrumb: {
        show: false,
      },
      data: [],
    },
  ],
};
export default {
  name: "enterpriseExtinct",
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("extinct-root");
      return;
      var that = this;
      var resizeEMTimer = null;
      window.onload = function () {
        if (resizeEMTimer) {
          clearTimeout(resizeEMTimer);
        }
        resizeEMTimer = setTimeout(() => {
          that.drawbar("extinct-root");
        }, 300);
      };
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.enterpriseExtinct;
      },
      () => {
        this.drawbar("extinct-root");
      }
    );
  },
  methods: {
    drawbar(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.series[0].data = this.$store.state.statistical.enterpriseExtinct;
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.hs-ee {
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
}
.hs-ee-wrap {
  /* border: 1px solid red; */
  /* width: 651px; */
  /* height: 335px; */
  width: 100%;
  height: 100%;
}
</style>